<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
      <h2>当前用户是:{{name}}</h2>
    <h2> {{ count }}</h2>
      <button @click="incre">+</button><span></span>
      <button @click="decrement">-</button>

      <div>
          <button @click="increadd(10)">加上+</button><span></span>
          <button @click="decrementdel(10)">减去-</button>
      </div>
      <div>
          <button @click="handleActionsAdd(10)">异步+</button><span></span>
          <button @click="handleActionsReduce(10)">异步-</button>
      </div>

  </div>
</template>

<script>

export default {
    name: 'home',
    components: {
    },
    methods: {
        incre() {
            this.$store.commit("increment");
        },
        decrement() {
            window.console.log("www");
            this.$store.commit("decrement");
        },
        increadd(n) {
            this.$store.commit("increadd",n);
        },
        decrementdel(n) {
            this.$store.commit("decrementdel",n);
        },
       //异步加载    调用顺序是：methods的方法 --》actions的方法--》 mutations方法
        handleActionsAdd(n){
            console.log("methods异步加法调用了");
            this.$store.dispatch('actionsAddCount',n)
        },
        handleActionsReduce(n){
            window.console.log("methods异步减法调用了");
            this.$store.dispatch('actionsReduceCount',n)
        }
    },
    computed: {
        count() {
            window.console.log(this.$store.state.Nums.count);
            return this.$store.state.Nums.count
        },
        name() {
            return this.$store.state.Person.name;
        }
    }
}

</script>
